<template>
        <div>
            <h1>Alert 警告提示</h1>
            <Anchor title="概述" h2></Anchor>
            <p>静态地呈现一些警告信息，可手动关闭。</p>
            <Anchor title="代码示例" h2></Anchor>
            <Demo title="基础用法">
                <div slot="demo">
                    <Alert>正常信息提示</Alert>
                    <Alert type="success">成功信息提示</Alert>
                    <Alert type="warning">预警信息提示</Alert>
                    <Alert type="error">错误信息提示</Alert>
                </div>
                <div slot="desc">
                    <p>基本使用方法，有四种样式可以选择<code>info</code>、<code>success</code>、<code>warning</code>、<code>error</code>。</p>
                </div>
                <i-code lang="html" slot="code">{{ code.base }}</i-code>
            </Demo>
            <Demo title="含描述信息">
                <div slot="demo">
                    <Alert>
                        正常信息提示
                        <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
                    </Alert>
                    <Alert type="success">
                        成功信息提示
                        <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
                    </Alert>
                    <Alert type="warning">
                        报警信息提示
                        <template slot="desc">
                        Content of prompt. Content of prompt. Content of prompt.
                    </template>
                    </Alert>
                    <Alert type="error">
                        错误信息提示
                        <span slot="desc">
                            Custom error description copywriting. <Icon type="help-circled" size="14"></Icon>
                        </span>
                    </Alert>
                </div>
                <div slot="desc">
                    <p>自定义<code>&lt;slot name="desc"&gt;</code>描述内容。</p>
                </div>
                <i-code lang="html" slot="code">{{ code.desc }}</i-code>
            </Demo>
            <Demo title="图标">
                <div slot="demo">
                    <Alert show-icon>正常信息提示</Alert>
                    <Alert type="success" show-icon>成功信息提示</Alert>
                    <Alert type="warning" show-icon>预警信息提示</Alert>
                    <Alert type="error" show-icon>错误信息提示</Alert>
                    <Alert show-icon>
                        正常信息提示
                        <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
                    </Alert>
                    <Alert type="success" show-icon>
                        成功信息提示
                        <span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
                    </Alert>
                    <Alert type="warning" show-icon>
                        预警信息提示
                        <template slot="desc">
                        Content of prompt. Content of prompt. Content of prompt.
                    </template>
                    </Alert>
                    <Alert type="error" show-icon>
                        错误信息提示
                        <span slot="desc">
                            Custom error description copywriting.
                        </span>
                    </Alert>

                </div>
                <div slot="desc">
                    <p>根据 type 属性自动添加不同图标，或者自定义图标 slot 。</p>
                </div>
                <i-code lang="html" slot="code">{{ code.icon }}</i-code>
            </Demo>
            <Demo title="可关闭">
                <div slot="demo">
                    <Alert closable>正常信息提示</Alert>
                    <Alert closable type="success">成功信息提示</Alert>
                    <Alert closable type="warning">预警信息提示</Alert>
                    <Alert closable type="error">错误信息提示</Alert>
                    <Alert closable>
                        正常信息提示
                        <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
                    </Alert>
                    <Alert closable type="success">
                        成功信息提示
                        <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
                    </Alert>
                    <Alert closable type="warning">
                        报警信息提示
                        <template slot="desc">
                        Content of prompt. Content of prompt. Content of prompt.
                    </template>
                    </Alert>
                    <Alert closable type="error">
                        错误信息提示
                        <span slot="desc">
                            Custom error description copywriting. <Icon type="help-circled" size="14"></Icon>
                        </span>
                    </Alert>

                    <Alert show-icon closable>
                        正常信息提示
                        <span slot="close">不再提示</span>
                    </Alert>
                    <Alert type="success" show-icon closable>
                        成功信息提示
                        <span slot="close">不再提示</span>
                    </Alert>
                    <Alert type="warning" show-icon closable>预警信息提示<span slot="close">不再提示</span></Alert>
                    <Alert type="error" show-icon closable>错误信息提示<span slot="close">不再提示</span></Alert>
                    <Alert show-icon closable>
                        正常信息提示
                        <template slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </template>
                        <span slot="close">不再提示</span>
                    </Alert>
                    <Alert type="success" show-icon closable>
                        成功信息提示
                        <span slot="desc">Content of prompt. Content of prompt. Content of prompt. Content of prompt. </span>
                        <span slot="close">不再提示</span>
                    </Alert>
                    <Alert type="warning" show-icon closable>
                        预警信息提示
                        <template slot="desc">
                        Content of prompt. Content of prompt. Content of prompt.
                    </template>
                    <span slot="close">不再提示</span>

                    </Alert>
                    <Alert type="error" show-icon closable>
                        错误信息提示
                        <span slot="desc">
                            Custom error description copywriting.
                        </span>
                        <span slot="close">不再提示</span>
                    </Alert>
                </div>
                <div slot="desc">
                    <p>显示关闭按钮，点击可关闭提示，也可以自定义关闭 slot 。</p>
                </div>
                <i-code lang="html" slot="code">{{ code.close }}</i-code>
            </Demo>

            <div class="api">
                <Anchor title="API" h2></Anchor>
                <Anchor title="Alert props" h3></Anchor>
                <table>
                    <thead>
                        <tr>
                            <th>属性</th>
                            <th>说明</th>
                            <th>类型</th>
                            <th>默认值</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>type</td>
                            <td>警告提示样式，可选值为<code>info</code>、<code>success</code>、<code>warning</code>、<code>error</code></td>
                            <td>String</td>
                            <td>info</td>
                        </tr>
                        <tr>
                            <td>closable</td>
                            <td>是否可关闭</td>
                            <td>Boolean</td>
                            <td>false</td>
                        </tr>
                        <tr>
                            <td>show-icon</td>
                            <td>是否显示图标</td>
                            <td>Boolean</td>
                            <td>false</td>
                        </tr>
                    </tbody>
                </table>
                <Anchor title="Alert events" h3></Anchor>
                <table>
                    <thead>
                        <tr>
                            <th>事件名</th>
                            <th>说明</th>
                            <th>返回值</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>on-close</td>
                            <td>关闭时触发</td>
                            <td>event</td>
                        </tr>
                    </tbody>
                </table>
                <Anchor title="Alert slot" h3></Anchor>
                <table>
                    <thead>
                        <tr>
                            <th>名称</th>
                            <th>说明</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>无</td>
                            <td>警告提示内容</td>
                        </tr>
                        <tr>
                            <td>desc</td>
                            <td>警告提示辅助性文字介绍</td>
                        </tr>
                        <tr>
                            <td>icon</td>
                            <td>自定义图标内容</td>
                        </tr>
                        <tr>
                            <td>close</td>
                            <td>自定义关闭内容</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
</template>
<script>
    import Demo from './demo/demo.vue';
    import Code from './code/alert';
    import Anchor from './anchor.vue';
    import iCode from './code/code';
    export default {
        components: {
            iCode,
            Demo,
            Anchor
        },
        data () {
            return {
                code: Code
            }
        },
        methods: {
        }
    }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

    .api table {
        font-family: Consolas,Menlo,Courier,monospace;
        font-size: 12px;
        border-collapse: collapse;
        border-spacing: 0;
        empty-cells: show;
        border: 1px solid #e9e9e9;
        width: 100%;
        margin-bottom: 24px
    }

    .api table th {
        background: #f7f7f7;
        white-space: nowrap;
        color: #5c6b77;
        font-weight: 600
    }

    .api table td,.api table th {
        border: 1px solid #e9e9e9;
        padding: 8px 16px;
        text-align: left
    }

    .api table td ul li {
        font-size: 12px!important
    }
</style>
